<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 
            逆向传值，通过自定义事件
            子传递：使用$emit(自定义事件名称，传递值)触发监听
            父调用：接收监听<child @自定义事件名称=处理函数></child>

     -->
    <div id="box">
        <parent></parent>
    </div>
    <template id="p">
        <div>
            父组件
            <!-- 调用子组件 处理函数不要加() -->
            <child @change="getcmsg"></child>>
            接收到的子组件的值为：{{msg}}
        </div>
    </template>
    <template id="c">
        <div>
            子组件
            <button @click="fn"> 传递数据</button>
        </div>
    </template>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{},
            components:{
                parent:{
                    template:"#p",
                    data(){
                        return{
                            msg:"",
                        }
                    },methods:{
                        //接收监听(参数就是触发监听emit传入的值 )
                        getcmsg(inmsg){
                            console.log(inmsg);
                            this.msg=inmsg;
                        }
                    },
                    components:{
                        child:{
                            template:"#c",
                            data(){
                                return{
                                    cmsg:"子的数据"
                                }
                            },
                            methods: {
                                fn(){
                                    //准备传递数据
                                    console.log(this);
                                    this.$emit("change",this.cmsg)
                                
                                }
                            }
    
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>